<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<style type="text/css">
	#info{
		top: 100px;
		left: 100px;
		font-size: 20px;
		margin-left:30%;
	}
	#head{
		position: relative;
		top: 50px;
		border-radius: 100%;
		width: 40%;
		height: 40%;
		background-repeat: no-repeat;
		margin-top: 20px;
	}
	.button{
		margin-top: 80px;
		margin-left: 40px;
		width: 100px;
		height: 50px;
		background-image:url("images/submit.png");
	}
	</style>
</head>
<body>
				<div class="row" id="app">
					<div class="col-sm-12" id="info">
						<div>
							<p>&emsp;用户名:{{user.account}}</p>
							<p>&emsp;&emsp;性别:<input type="text" v-model="gender"></p>
							<p>身份证号:<input type="text" v-model="number"> </p>
							<p>&emsp;&emsp;电话:<input type="text" v-model="phone"></p>
							<p>&emsp;&emsp;邮箱:<input type="text" v-model="email"></p>
							<p>注册时间:{{user.regtime}}</p>
							<button @click="upinfo()" class="button" >确认修改</button>
						</div>
					</div>
				</div>
				
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			user:'',
			gender:'',
			number:'',
			phone:'',
			email:''
		},
		methods:{
			upinfo:function(){
				var number = this.number;
				var gender = this.gender;
				var phone = this.phone;
				var email = this.email;
				axios.get("user/upinfo?number="+number+"&gender="+gender+"&phone="+phone+"&email="+email).then(res=>{
					if(res.data==1){
						alert("修改成功");
					}
				})
				
			}
		},
		//页面加载完后触发
		mounted(){
			axios.get("user/find").then(res => {
				if(res.data!=null){
					this.user=res.data;
					this.number=this.user.number;
					this.gender=this.user.gender;
					this.phone=this.user.phone;
					this.email=this.user.email;
				}else{
					alert("系统繁忙");
				}
				
			})
		}
	});
	</script>
</body>
</html>
